<template>
  <a-card>
    <spin :spinning="loading">
      <div class="wrapper">
        <div class="item">
          <div class="total">共 {{ basicInfo.totalNumberOfBooks }} 本</div>
          <div class="text">书籍</div>
        </div>
        <div class="item">
          <div class="total">共 {{ basicInfo.totalNumberOfUsers }} 位</div>
          <div class="text">用户</div>
        </div>
        <div class="item">
          <div class="total">共 {{ basicInfo.totalNumberOfLogs }} 条</div>
          <div class="text">日志</div>
        </div>
      </div>
    </spin>
  </a-card>
  <br>
  <div class="books_and_logs">
    <div class="left">
      <a-card title="最近添加的书籍">
        <a-table :columns="columnsOfBooks" :data-source="bookList" :pagination="false" :row-key="record=>record._id"
                 :scroll="{x:'max-content'}">
          <template #publication_date="data">
            {{ formatMonth(data.record.publicationDate) }}
          </template>
        </a-table>
      </a-card>
    </div>
    <div class="right">
      <a-card title="历史记录">
        <a-table :columns="columnsOfLogs" :data-source="logs" :pagination="false" :row-key="record=>record._id"
                 :scroll="{x:'max-content'}">
          <template #createAt="{ record }">
            {{ formatDate(record.meta.createAt) }}
          </template>
        </a-table>
      </a-card>
    </div>
  </div>
</template>

<script>
import { Card, Spin, Table } from 'ant-design-vue'
import { onMounted, reactive, ref } from 'vue'
import { fetchDashboardInfo } from '@/api/dashboard'
import { fetchBookList } from '@/api/book'
import { formatDate, formatMonth } from '@/utils'
import { fetchLogList } from '@/api/log'
import { getLogByPath } from '@/utils/log'

const columnsOfBooks = [
  {
    title: '书名',
    dataIndex: 'name',
  },
  {
    title: '分类',
    dataIndex: 'type',
  },
  {
    title: '作者',
    dataIndex: 'author',
  },
  {
    title: '出版时间',
    dataIndex: 'publicationDate',
    slots: {
      customRender: 'publication_date',
    },
  },
  {
    title: '价格',
    dataIndex: 'price',
  },
]
const columnsOfLogs = [
  {
    title: '用户名',
    dataIndex: 'user.account',
    key: 'account',
  },
  {
    title: '动作',
    dataIndex: 'action',
    key: 'action',
  },
  {
    title: '创建时间',
    slots: {
      customRender: 'createAt',
    },
    key: 'createAt',
  },
]
export default {
  name: 'index',
  components: {
    ACard: Card,
    Spin: Spin,
    ATable: Table,
  },
  setup () {
    const bookList = ref([])
    const logs = ref([])
    const basicInfo = reactive({
      totalNumberOfBooks: 0,
      totalNumberOfUsers: 0,
      totalNumberOfLogs: 0,
    })
    const loading = ref(true)
    onMounted(() => {
        fetchDashboardInfo().then(res => {
            basicInfo.totalNumberOfUsers = res.data.totalNumberOfUsers
            basicInfo.totalNumberOfBooks = res.data.totalNumberOfBooks
            basicInfo.totalNumberOfLogs = res.data.totalNumberOfLogs
            loading.value = false
          },
        )
        fetchBookList({
          page: 1,
          size: 10,
        }).then(res => {
          bookList.value = res.data.list
        })
        fetchLogList(1, 10).then(res => {
          res.data.list.forEach(item => {
            item.action = getLogByPath(item.request.url)
          })
          logs.value = res.data.list
        })
      },
    )
    return {
      basicInfo,
      loading,
      columnsOfBooks,
      columnsOfLogs,
      bookList,
      logs,

      formatMonth,
      formatDate,
    }
  },
}
</script>

<style lang="scss" scoped>
.wrapper {
  display: flex;
  justify-content: space-around;

  .total {
    font-size: 22px;
  }

  .text {
    font-size: 14px;
    color: #666;
  }
}

.books_and_logs {
  display: flex;
  justify-content: space-between;

  .right {
    flex: 1;
    margin-left: 12px;
  }

  .left {
    flex: 1;
    margin-right: 12px;
  }
}
</style>
